<template>
<div class="column">
    <div  class="title thumb" @click="()=>actName=1">文字<div class="sel" v-show="actName === 1"></div></div>
    <div  class="title thumb" @click="()=>actName=2">图库<div class="sel" v-show="actName === 2"></div></div>
    <div  class="title thumb" @click="()=>actName=3">传图<div class="sel" v-show="actName === 3"></div></div>
</div>
<div class="part" v-show="actName === 1">
  <Design :showTitle="false"  :designData="(embroideryText as any)" :frameWidth="15"  />
</div>
 <div class="part" v-show="actName === 2" >
  <Design :showTitle="false"  :designData="(embroiderySel as any)" :frameWidth="15"  />
</div>
<div class="part"  v-show="actName === 3">
  <Design :showTitle="false"  :designData="(embroideryUpload as any)" :frameWidth="15"  />
</div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import Design from "@/components/Design/index.vue";
import  embroiderySel     from "@/json/embroiderySel.json"
import  embroideryText     from "@/json/embroideryText.json"
import  embroideryUpload     from "@/json/embroideryUpload.json"

const actName = ref<1|2|3>(1);

</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>